<template>
  <div class="h-container">
    <h1>Switch 组件示例</h1>
    <hr />
    <p>
      开关用于表示两种状态之间的切换，跟单独使用的 checkbox 有点类似，但 switch
      开关更多的是触发即可改变状态，而 checkbox
      更多的是用于表格，一般都需要配合表单的提交操作
    </p>
    <Demo :component="Switch1Demo"></Demo>
    <hr />
    <Demo :component="Switch2Demo"></Demo>
    <hr />
    <Demo :component="Switch3Demo"></Demo>
  </div>
</template>

<script lang="ts">
import Demo from './Demo.vue'
import Switch1Demo from './sourceCode/switchSourceCode/Switch1.demo.vue'
import Switch2Demo from './sourceCode/switchSourceCode/Switch2.demo.vue'
import Switch3Demo from './sourceCode/switchSourceCode/Switch3.demo.vue'
export default {
  components: { Demo },
  setup() {
    return { Demo, Switch1Demo, Switch2Demo, Switch3Demo }
  },
}
</script>
